<template>
    <view class="commentitem">
        <view class="header">
            <view>
                <uv-avatar size="24"
                    src="https://mxzj-translate.oss-cn-chengdu.aliyuncs.com/catv2/appfile/image/img/AI%403x.png"
                    shape="square"></uv-avatar>
            </view>
            <view class="header_right">
                <view class="top">
                    <view>{{ $t('AI识别') }} </view>
                </view>
                <view class="top2">
                    <view>{{ dayjs(data.AIremarkstime || data.create_time).format('YYYY-MM-DD HH:mm:ss') }}
                    </view>
                </view>
            </view>

        </view>
        <view class="datacontext">
            <view class="negative_prob" v-if="data.sentiment === 0">
                负面评价 {{ AIremarks.length == 0 ? '(未识别出负面关键词)' : '' }}
            </view>
            <!-- <view class="negative_prob1" v-if="data.sentiment === 1">
                {{ `中性评价` }}
            </view>
            <view class="negative_prob2" v-if="data.sentiment === 2">
                {{ `正面评价（可信度：${Math.floor(data.positive_prob)} %）` }}
            </view> -->
        </view>
        <view class="datacontext">
            <view v-for="(v, i) in AIremarks" :key="i">
                <uv-button size="mini" :custom-style="_miniButton" plain
                    :color="v.sentiment === 2 ? '#5EC25C' : '#FF746F'">{{
                        v.prop }}： {{
        htmlcontext(v.abstract) }}</uv-button>

            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { htmlcontext } from '@/util/html';
import { miniButton } from '@/util/style';
import dayjs from 'dayjs';
import { unionBy, assign } from 'lodash-es'
import { computed } from 'vue';
const p = defineProps<{ data: Eps.BaseUserCommentEntity }>()

const _miniButton = assign({}, miniButton, {
    background: '#fefafb'
})

const AIremarks = computed(() => {
    const AIremarks = (p.data.AIremarks?.map(e => {
        return {
            ...e,
            abstract: htmlcontext(e.abstract).slice(0, 18),
        }
    }) || []).filter(e => !e.sentiment)
    return unionBy(AIremarks, 'abstract')
})

const n = ['消极', '中性', '积极']

</script>

<style scoped lang="scss">
.commentitem {
    background-color: $uni-text-color-inverse;
    display: flex;
    flex-direction: column;
    padding: 32rpx;
    gap: 24rpx;

    .header {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
        width: 100%;

        .header_right {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;


            .top {
                height: 43rpx;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                font-weight: 600;

            }

            .top2 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                font-size: 24rpx;
                color: rgba(170, 170, 170, 1);
            }

        }
    }

    .datacontext {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;

        .negative_prob {
            color: #000;
            border-radius: 2px;
            text-align: center;
            font-size: 28rpx;
        }

        .negative_prob1 {
            color: #333;
            font-size: 14px;
            border-radius: 2px;
            background-color: rgba(255, 241, 237, 1);
            text-align: center;
            font-weight: 600;
            padding-left: 12px;
            padding-right: 12px;
            line-height: 30px;
            border: 1rpx solid #333;
            height: 30px;
        }

        .negative_prob2 {
            color: #5EC25C;
            font-size: 14px;
            border-radius: 2px;
            background-color: rgba(220, 237, 220, 0.5);
            text-align: center;
            font-weight: 600;
            padding-left: 12px;
            padding-right: 12px;
            line-height: 30px;
            height: 30px;
            border: 1rpx solid #5EC25C;
        }
    }

}
</style>